<template>
  <div class="tableBlock">
    <div v-if="!hiddenHeader" class="tableBlock-header" :class="{'fixed-header':fixedHeader}">
      <div class="header_left">
        <span v-if="!hiddenTitle" class="title">{{ title||$route.meta.title }}</span>
        <span v-if="hiddenTitle&&title" class="title" />
        <slot name="header_left" />
      </div>
      <div>
        <slot name="header_right" />
      </div>
    </div>
    <div class="tableBlock_main">
      <div class="main_filter">
        <slot name="filter" />
      </div>
      <div ref="main" class="main">
        <slot />
      </div>
      <div class="footer">
        <slot name="footer" />
      </div>
      <pagination v-if="$attrs.size" class="main_pagination" v-bind="$attrs" v-on="$listeners" />
    </div>
  </div>
</template>

<script>

export default {
  name: 'TableBlock',
  props: {
    title: {
      type: String,
      default: null
    },
    hiddenHeader: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    },
    hiddenTitle() {
      return !!this.$slots.header_left
    }
  }
}
</script>

<style  lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

.tableBlock {
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
  .tableBlock-header {
    min-height: 50px;
    background: #f0f2f5;
    width: calc(100vw - #{$sideBarWidth});
    transition: width 0.28s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 16px 0 14px;
    .header_left {
      display: flex;
      align-items: center;
      .title{
        display: inline-flex;
        height: 20px;
        line-height: 20px;
        border-left: 5px solid $theme_color;
        padding-left: 8px;
      }
    }
  }
  .tableBlock_main {
    flex: 1 0 auto;
    margin:0 12px 10px;
    height: 200px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .main_filter{
      padding: 0 16px;
      border: 1px solid $border_color;
      border-bottom: none;
    }
    .main{
      flex: 1 0 auto;
      height: 100px;
      /deep/.pagination-container{
        border: 1px solid $border_color;
        border-top: none;
      }
    }
    .footer{

    }
  }
}
.hideSidebar .fixed-header {
  width: calc(100vw - 54px);
}
.mobile .fixed-header {
  width: 100vw;
}
/deep/.radioBtn{
  padding: 6px 2px !important;
}
/deep/.el-table th{
  background-color: #fff !important;
}
/deep/.el-table__header{
  background-color: #fff !important;
}
</style>
